﻿@model SMECustomerWebsite.Models.ViewModels.CrossSelling.CrossSellingViewModel

@Html.Action("SubMenuXSelling", "System")
@Html.Action("CustInfo", "System")
<div class="">
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <div style="display:inline-block;">
                        <div>
                            <h2>@SMECustomerWebsite.Core.Resources.Resource.XSellingPreApprovedTitle </h2>
                        </div>
                        <div style="display:inline-block;">
                            <p>@SMECustomerWebsite.Core.Resources.Resource.XSellingPreApprovedCreditCardDesc</p>
                        </div>
                    </div>
                    <ul class="nav navbar-right panel_toolbox">
                        <li>
                            <div class="xsell-search-box">
                                <select id="xselling-msbo-dropdown" class="search_column form-control" tabindex="-1">
                                    <option value="/XSelling/PreApprovedCredit">General</option>
                                    <option value="/XSelling/PreApprovedCredit87">Conversion</option>
                                    <option value="/XSelling/PreApprovedCredit21" selected="selected">Card for loan</option>
                                </select>
                            </div>
                        </li>
                        <li>
                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    @Html.Action("SubMenuPreApprovedCreditCard", "System")
                    @switch (Model.CurrentUser.GroupIdentifier)
                    {
                        case "1":
                            <table id="xselling" class="table table-bordered table-striped jambo_table custom_table" style="width:100% !important">
                                <thead class="headings">
                                    <tr>
                                        <th class="column-title" width="5%">@SMECustomerWebsite.Core.Resources.Resource.Zone.ToUpper()</th>
                                        <th class="column-title" width="5%">@SMECustomerWebsite.Core.Resources.Resource.Branch.ToUpper()</th>
                                        <th class="column-title">DAO</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.MSBONameHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitCreditCardPreApprovedHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitTimeCreditCardPreApprovedHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitCreditCardPreApprovedHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitTimeCreditCardPreApprovedHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            break;
                        case "2":
                        <table id="xselling" class="table table-bordered table-striped jambo_table custom_table" style="width:100% !important">
                            <thead class="headings">
                                <tr>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Branch.ToUpper()</th>
                                    <th class="column-title">DAO</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.MSBONameHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitCreditCardPreApprovedHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitTimeCreditCardPreApprovedHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitCreditCardPreApprovedHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitTimeCreditCardPreApprovedHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                            break;
                        case "3":
                        <table id="xselling" class="table table-bordered table-striped jambo_table custom_table" style="width:100% !important">
                            <thead class="headings">
                                <tr>
                                    <th class="column-title">DAO</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.MSBONameHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitCreditCardPreApprovedHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitTimeCreditCardPreApprovedHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitCreditCardPreApprovedHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitTimeCreditCardPreApprovedHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                            break;
                        case "4":
                        <table id="xselling" class="table table-bordered table-striped jambo_table custom_table" style="width:100% !important">
                            <thead class="headings">
                                <tr>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitCreditCardPreApprovedHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitTimeCreditCardPreApprovedHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitCreditCardPreApprovedHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.LimitTimeCreditCardPreApprovedHeader</th>
                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                            break;
                        default:
                            break;
                    }
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    <script src="~/Scripts/custom_search_table.js"></script>
    <!-- bootstrap-daterangepicker -->
    <script src="~/scripts/datepicker/moment/moment.min.js"></script>
    <script src="~/scripts/datepicker/datepicker/daterangepicker.js"></script>
    <script src="/scripts/tableeditable/dataTables.rowsGroup.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#xselling-msbo-dropdown").select2({
            });

            @*$("#xselling-msbo-dropdown").val("@Model.productName.ToUpper()").trigger("change");*@
            $("#xselling-msbo-dropdown").on("change", function (e) {
                productselected = $("#xselling-msbo-dropdown").val();
                window.location.replace(productselected);
            });
            var totalColumn = [
                        { "sName": "CIF", "bSortable": false },
                        { "sName": "NAME", "bSortable": false },
                        { "sName": "VPB INDUSTRY", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "INFO", "bSortable": false }]
            var totalLenCol = 8;
            var totalCifCol = 0;
            switch (@Model.CurrentUser.GroupIdentifier)
            {
                case 1:
                    totalColumn = [
                           { "sName": "REGION", "bSortable": false },
                           { "sName": "BRANCH", "bSortable": false },
                           { "sName": "DAO", "bSortable": false },
                           { "sName": "MSBO", "bSortable": false },
                           { "sName": "CIF", "bSortable": false },
                           { "sName": "NAME", "bSortable": false },
                           { "sName": "VPB INDUSTRY", "bSortable": false },
                           { "sName": "DATE OPEN", "bSortable": false },
                           { "sName": "DATE OPEN", "bSortable": false },
                           { "sName": "DATE OPEN", "bSortable": false },
                           { "sName": "DATE OPEN", "bSortable": false },
                           { "sName": "DATE OPEN", "bSortable": false },
                           { "sName": "INFO", "bSortable": false }];
                    totalLenCol = 12;
                    totalCifCol = 4;
                    break;
                case 2:
                    totalColumn=  [
                        { "sName": "BRANCH", "bSortable": false },
                        { "sName": "DAO", "bSortable": false },
                        { "sName": "MSBO", "bSortable": false },
                        { "sName": "CIF", "bSortable": false },
                        { "sName": "NAME", "bSortable": false },
                        { "sName": "VPB INDUSTRY", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "INFO", "bSortable": false }];
                    totalLenCol = 11;
                    totalCifCol = 3;
                    break;
                case 3:
                    totalColumn= [
                        { "sName": "DAO", "bSortable": false },
                        { "sName": "MSBO", "bSortable": false },
                        { "sName": "CIF", "bSortable": false },
                        { "sName": "NAME", "bSortable": false },
                        { "sName": "VPB INDUSTRY", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "INFO", "bSortable": false }];
                    totalLenCol = 10;
                    totalCifCol = 2;
                    break;
                default:
                    break;
            }

            var table = $('#xselling').DataTable({
                "responsive": true,
                //"bAutoWidth": true,
                "order": [[0, 'asc']],
                "bServerSide": true,
                rowsGroup: [0, 1, 2,3],
                //"bProcessing": true,
                "sAjaxSource": '@Url.Action("PreApprovedCredit21Data", "Xselling")',
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                "aoColumns":totalColumn,
                "aoColumnDefs": [{
                    "sClass": "column-title",
                    "aTargets": [totalLenCol],
                    "mRender": function (data, type, full) {
                        return '<a class=\"btn btn-primary btn-xs\" onclick=\"showCustomerInfo(\'' + full[totalCifCol] + '\');\"><i class="fa fa-info"></i></a>';
                    }
                }, {
                    "aTargets": [0],
                    "width": "10%"
                }, {
                    "aTargets": [1],
                    "width": "10%"
                }],
                initComplete: function () {
                    this.api().columns().every(function () {
                        var column = this;
                        switch (column.context[0].aoHeader[0][column.index()].cell.innerText) {
                            case '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.Zone.ToUpper())':
                                createFilterRegion(column, '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.Zone)');
                                break;
                            case '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.Branch.ToUpper())':
                                createFilterBranch(column);
                                break;
                            case '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader.ToUpper())':
                                createFilterDate(column);
                                break;
                            case '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.LimitCreditCardPreApprovedHeader)':
                                createFilterBalance(column);
                                break;
                            case '@Html.Raw(SMECustomerWebsite.Core.Resources.Resource.MSBONameHeader.ToUpper())':
                                createFilterMSBOName(column, 1);
                                break;
                            case 'DAO':
                                createFilterMSBOName(column, 2);
                                break;
                            default:
                                if (column.index() < totalLenCol) {
                                    var select = $('<input type="text" class="filtet-table">')
                                                            .appendTo($(column.header()))
                                                            .on('keyup change', function () {
                                                                column.search(this.value).draw();
                                                            });
                                }
                                break;

                        }
                    });
                },
                "drawCallback": function (settings) {
                    $('table.custom_table th').removeClass().addClass('column-title');
                }
            });
        });
    </script>
}